<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="jxz">
        <title>个人中心</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
         <link rel="shortcut icon" href="image/mi.png" type="image/png">
         <link rel="icon" href="image/mi.png" type="image/png">
        <style>
         html,body{
            height: 100%;
            }
       body{
        background-color: #eee;
         }
     /*头部*/
     header{
         display: flex;
         justify-content: space-between;
         font-size: 3vw;
         color: gray;
     }
       header a{
           text-decoration: none;
           color: gray;
       }
    /*中心*/
    section{
        text-align: center;
        background-color:#FF6B00;
    }
    section a{
        display: inline-block;
        text-decoration: none;
        font-size: 5vw;
        color: white;
        position: relative;
        top: 4vw;
    }
    section a:hover{
        text-decoration: none;
        color: white;
    }
    section a:active{
        text-decoration: none;
    }
    section a:focus{
        text-decoration: none;
        color: white;
        border: none;
    }
    section>a>div{
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        background-color: #FFD24D;
        position: relative;
        right: -6vw;
    }
    section>a>div span{
     margin-top: 1.4vw;
     margin-right: -0.5vw;
    } 
    .inset{
        display: flex;
        justify-content: space-around;
        margin-top:10vw;
    }
    .inset a{
        font-size: 3vw;
        color: gray;
    }
    .inset a:nth-child(2){
        position: relative;
        left: 0.8vw;
    }
    .inset a:hover{
        text-decoration: none;
    }
   .inset a img{
       width: 15vw;
   }
   .inset p{
       position: relative;
       left:2vw;
   }
   .border-bottom{
       border-bottom: 1px solid #E33F7B;
       width: 8vw;
       position: relative;
       left: 3vw;
       
   }
    .border-bottom1{
       border-bottom: 1px solid #8BC34A;
       width: 8vw;
       position: relative;
       left: 3vw;
   }
    .border-bottom2{
       border-bottom: 1px solid #FFAA00;
       width: 8vw;
       position: relative;
       left: 3vw;
   }
    .content{
            background-color: white;
            height: 25vh;
        }
    .content a{
            text-decoration: none;
            color: black;
            font-size: 2vw;
        }
   .border{
       border-bottom: 1px solid lightgray;
   }
   .empty{
       width: 100%;
       background-color: #eee;
       height: 15px;
   }
   #height{
       width: 100%;
       height: 120px;
   }
                               /*页脚*/
    footer{
        height:100px;
        width: 100%;
        background-color: white;
        position: fixed;
        bottom: 0;
        border-top: 1px solid gray;
    }
      nav{
            display: flex;
            line-height: 35px;
            margin-bottom: 0;
            justify-content: space-around;
        }
        nav a{
            font-size: 3rem;
            font-weight: normal;
            color: gray;
            display: block;    
        }
        .picture{
            display: inline-block;
            width: 60px;
            height: 60px;
            background-image: url(image/spr1.png);

        }
        .r1c7{
          background-position: 0 -360px;
        }
        .r1c1{
            background-position: 0 0;
        }
        .r1c3{
            background-position: 0 -120px;
        }
        .r1c4{
            background-position: 0-240px;
        }
        </style>
    </head>
    <body>
        <!--头部-->
    <header>
        <a href="小米账号登录.html"> <span class="glyphicon glyphicon-chevron-left"></span></a>
        <span>个人中心</span>
        <a href="小米账号登录.html"><span class="glyphicon glyphicon-search"></span></a>
    </header>
       <!--中心-->
     <section>
         <a href="小米账号登录.html">
             <span>立即登录</span>
             <div>
            <span class="glyphicon glyphicon-plus"></span>
             </div>
         </a>
     </section>
     <div class="inset">
       <a href="小米账号登录.html">
            <img src="image/jss.png" alt="">
            <p>全部订单</p>
            <div class="border-bottom"></div>
       </a>
         <a href="小米账号登录.html">
           <img src="image/jss.png" alt="">
            <p>代付款</p>
            <div class="border-bottom1"></div>
       </a>
         <a href="小米账号登录.html">
           <img src="image/jss.png" alt="">
            <p>待收货</p>
            <div class="border-bottom2"></div>
       </a>
       </div>
       <div class="content">
           <div>
            <a href="小米账号登录.html">
            <img src="image/jj.png" alt="">
            <span>我的优惠</span>
            </a>
           </div>
           <div class="border"></div>
           <div>
            <a href="小米账号登录.html">
            <img src="image/jj.png" alt="">
            <span>F码通道</span>
            </a>
           </div>
           <div class="empty"></div>
           <div>
            <a href="小米账号登录.html">
            <img src="image/jj.png" alt="">
            <span>我的服务</span>
            </a>
           </div>
           <div class="empty"></div>
            <div>
            <a href="小米账号登录.html">
            <img src="image/jj.png" alt="">
            <span>设置</span>
            </a>
           </div>
       </div>
       <div id="height"></div>
          <!--页脚-->
        <footer>
        <nav>
        <a href="小米商城首页.html">
        <div class="picture r1c7"></div>
        <p>商城</p>
        </a>
        <a href="商城分类.html">
         <div class="picture r1c1"></div>
        <p>分类</p> 
        </a>
        <a href="小米购物车.html">
         <div class="picture r1c3"></div>
        <p>购物车</p>
        </a>
        <a href="个人中心.html">
        <div class="picture r1c4"></div>
        <p>服务</p>
        </a>
    </nav>
    </footer>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>